<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <script src="static/jquery/jquery.js"></script>
    <script src="static/layui/layui.js"></script>
</head>
<body>
<div style="width: 95%;margin: 5px auto">
    <form class="layui-form">
        <input type="hidden" name="userinfoId" id="userinfoId">
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" id="username" disabled
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="oldPassword" class="layui-form-label">原密码</label>
            <div class="layui-input-block">
                <input type="password" name="oldPassword" id="oldPassword" placeholder="请输入原密码"
                       class="layui-input"
                       lay-verify="required|checkOldPwd" lay-reqtext="请填写原密码">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="password" class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" id="password" placeholder="请输入新密码" class="layui-input"
                       lay-verify="required" lay-reqtext="请填写新密码">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="confirmPassword" class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="confirmPassword" id="confirmPassword" placeholder="请再次输入密码"
                       class="layui-input"
                       lay-verify="required|checkPwd" lay-reqtext="请填写确认密码">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <button lay-submit class="layui-btn" lay-filter="update">提交</button>
            </div>
        </div>
    </form>
</div>
</body>
<script src="static/jquery/js.cookie.js"></script>
<script src="static/common/js/ajax.js"></script>
<script src="static/common/js/base.js"></script>
<script>
    layui.use(function () {
        const loginInfo = getLoginInfo();
        if (!loginInfo) {
            layer.msg('用户异常！', {icon: 5});
            top.location.replace("page/index");
        } else {
            $("#userinfoId").val(loginInfo.userinfoId)
            $("#username").val(loginInfo.username);
            const form = layui.form;
            // 自定义验证规则
            form.verify({
                checkOldPwd: function (value) {
                    let code = 200;
                    $.ajax({
                        url: 'article/user/check/password',
                        data: {
                            userinfoId: $("#userinfoId").val(),
                            password: value
                        },
                        headers,
                        method: "get",
                        dataType: "json",
                        async: false,//设置ajax为同步请求
                        success(res) {
                            code = res.code;
                        },
                        error(e) {
                            layer.alert('检验密码异常！')
                            console.log(e);
                        }
                    })
                    if (code === 500) {
                        return "原密码不正确";
                    }
                },
                checkPwd: function (value) {
                    if (value !== $("#password").val()) {
                        return "两次密码不一致！";
                    }
                }
            });
            form.on("submit(update)", function (data) {
                $.ajax({
                    url: "article/user/password",
                    data: data.field,
                    method: "post",
                    dataType: "json",
                    headers,
                    success(res) {
                        if (res.code === 200) {
                            layer.msg('操作成功！请重新登录！', {icon: 1}, function () {
                                http.get("logout", null, function () {
                                    Cookies.remove("token");
                                    top.location.replace("page/index");
                                })
                            });
                        } else {
                            layer.alert(res.msg, {icon: 2});
                        }
                    },
                    error(e) {
                        layer.alert('服务器睡着了', {icon: 6})
                        console.log(e)
                    }
                })
                return false;
            });
        }
    })
</script>
</html>
